<template>
  <div class="notification-content">
    <!-- 点赞聚合通知特殊展示 -->
    <span v-if="isAggregatedLike" class="aggregated-like-notification">
      {{ formatAggregatedLikeText }}
    </span>

    <!-- 普通通知内容显示：使用actionText -->
    <span v-else class="notification-text">
      {{ notification.actionText || notification.typeName }}
    </span>

    <!-- 新的数据结构:评论详情(只有点赞评论时才显示,点赞文章时为空) -->
    <div
      v-if="notification.commentDetail && notification.commentDetail.content"
      class="comment-detail-card"
    >
      <div class="comment-header">
        <span class="commenter-name">{{
          notification.commentDetail.commenter?.nickName ||
          notification.commentDetail.commenter?.userName
        }}</span>
        <span v-if="notification.commentDetail.replyToUser" class="reply-to">
          回复 @{{
            notification.commentDetail.replyToUser.nickName ||
            notification.commentDetail.replyToUser.userName
          }}
        </span>
      </div>
      <div class="comment-content-text">
        {{ notification.commentDetail.content }}
      </div>
      <div class="comment-meta">
        <span class="meta-item">
          <el-icon><ChatDotRound /></el-icon>
          {{ notification.commentDetail.replyCount || 0 }}
        </span>
        <span class="meta-item">
          <el-icon><StarFilled /></el-icon>
          {{ notification.commentDetail.likeCount || 0 }}
        </span>
        <span class="meta-time">{{
          formatTime(notification.commentDetail.createTime)
        }}</span>
      </div>
    </div>

    <!-- 原评论引用（回复类型） -->
    <div v-if="notification.originalComment" class="original-comment-card">
      <div class="original-label">原评论</div>
      <div class="original-content">
        <span class="original-author">{{
          notification.originalComment?.commenter?.nickName || "用户"
        }}</span
        >: {{ notification.originalComment?.content || "" }}
      </div>
    </div>

    <!-- 文章信息卡片 -->
    <div v-if="notification.articleInfo" class="article-info-card">
      <img
        v-if="notification.articleInfo?.coverImage"
        :src="notification.articleInfo.coverImage"
        :alt="notification.articleInfo?.title || '文章'"
        class="article-cover"
      />
      <div class="article-text">
        <h4 class="article-title">
          {{ notification.articleInfo?.title || "文章" }}
        </h4>
        <p class="article-summary">
          {{ notification.articleInfo?.summary || "" }}
        </p>
      </div>
    </div>

    <!-- 被@提及的用户列表 -->
    <div
      v-if="
        notification.mentionedUsers && notification.mentionedUsers.length > 0
      "
      class="mentioned-users"
    >
      <span class="mentioned-label">提及了:</span>
      <span
        v-for="user in notification.mentionedUsers"
        :key="user?.userId"
        class="mentioned-user"
      >
        @{{ user?.nickName || "用户" }}
      </span>
    </div>

    <!-- 额外信息区域：兼容旧数据 -->
    <div v-if="showExtraInfo" class="notification-extra">
      <!-- 文章摘要（点赞/收藏文章时显示） -->
      <div v-if="extraInfo?.articleSummary" class="article-summary">
        <div class="summary-label">文章摘要</div>
        <div class="summary-text">
          {{ extraInfo.articleSummary }}
        </div>
      </div>

      <!-- 评论完整内容（点赞评论/评论文章时显示） -->
      <div v-if="extraInfo?.commentContent" class="comment-content">
        <div class="comment-label">评论内容</div>
        <div class="comment-text">
          {{ extraInfo.commentContent }}
        </div>
      </div>

      <!-- 回复内容（回复评论时显示） -->
      <div v-if="extraInfo?.replyContent" class="reply-content">
        <div class="reply-text">
          <div class="original-comment">
            <span class="label">原评论:</span>
            <span class="text">{{ extraInfo.originalCommentContent }}</span>
          </div>
          <div class="reply-text-content">
            <span class="label">回复内容:</span>
            <span class="text">{{ extraInfo.replyContent }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, PropType } from "vue";
import { ChatDotRound, StarFilled } from "@element-plus/icons-vue";
import { IconifyIconOffline } from "@/components/ReIcon";
import { parseExtraData } from "@/utils/notificationUtils";
import type { NotificationDetail } from "@/api/notification";

// Props
const props = defineProps({
  notification: {
    type: Object as PropType<NotificationDetail>,
    required: true
  }
});

// ========== 点赞聚合通知相关 ==========

// 判断是否为聚合点赞通知
const isAggregatedLike = computed(() => {
  return (
    props.notification.type === "LIKE" &&
    props.notification.senderCount !== undefined &&
    props.notification.senderCount > 0
  );
});

// 显示的点赞者列表（最多3个）
const displaySenders = computed(() => {
  if (!props.notification.senders) return [];
  return props.notification.senders.slice(0, 3);
});

// 剩余点赞者数量
const remainingSendersCount = computed(() => {
  const count = props.notification.senderCount || 0;
  const displayCount = displaySenders.value.length;
  return Math.max(0, count - displayCount);
});

// 格式化聚合点赞文本
const formatAggregatedLikeText = computed(() => {
  const count = props.notification.senderCount || 0;
  const senders = displaySenders.value;

  // 获取目标信息（文章或评论）
  let targetText = "";
  if (props.notification.articleInfo) {
    targetText = `文章《${props.notification.articleInfo.title}》`;
  } else if (props.notification.commentDetail) {
    targetText = "评论";
  } else {
    const targetTypeName =
      props.notification.targetType === "article" ? "文章" : "评论";
    targetText = targetTypeName;
  }

  if (count === 0) return "";

  if (count === 1) {
    // 单人点赞：张三 赞了你的文章《Spring Boot教程》
    return `赞了你的${targetText}`;
  } else if (count <= 3) {
    // 3人以内：张三、李四、王五 赞了你的文章《Spring Boot教程》
    // 注意：这里需要在 NotificationList 中显示所有人名，这里只显示动作
    return `赞了你的${targetText}`;
  } else {
    // 超过3人：张三、李四、王五等15人 赞了你的文章《Spring Boot教程》
    return `等${count}人 赞了你的${targetText}`;
  }
});

// 获取头像 URL
const getAvatarUrl = (url: string) => {
  if (!url) return "";
  if (url.startsWith("http")) return url;
  return `http://localhost:8081${url.startsWith("/") ? "" : "/"}${url}`;
};

// 解析额外信息
const extraInfo = computed(() => {
  return parseExtraData(props.notification.extraData);
});

// 是否显示额外信息（仅在没有新字段时显示旧的extraData）
const showExtraInfo = computed(() => {
  // 如果已经有新字段，不显示旧的extraData
  if (
    props.notification.commentDetail ||
    props.notification.articleInfo ||
    props.notification.originalComment
  ) {
    return false;
  }

  const extra = extraInfo.value;
  if (!extra) return false;

  // 有文章摘要、评论内容、回复内容时显示
  return !!(extra.articleSummary || extra.commentContent || extra.replyContent);
});

// 格式化时间
const formatTime = (time: string): string => {
  if (!time) return "";
  const date = new Date(time);
  const now = new Date();
  const diff = now.getTime() - date.getTime();

  const minute = 60 * 1000;
  const hour = 60 * minute;
  const day = 24 * hour;

  if (diff < minute) return "刚刚";
  if (diff < hour) return `${Math.floor(diff / minute)}分钟前`;
  if (diff < day) return `${Math.floor(diff / hour)}小时前`;
  if (diff < 7 * day) return `${Math.floor(diff / day)}天前`;

  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
};
</script>

<style scoped lang="scss">
/* 响应式设计 */
@media (width <= 768px) {
  .notification-content {
    // 点赞聚合通知移动端适配
    .aggregated-like-notification {
      flex-direction: column;
      gap: 8px;
      align-items: flex-start;
      padding: 10px;

      .like-avatars {
        width: 100px;
        height: 32px;

        .sender-avatar {
          width: 32px;
          height: 32px;
        }

        .more-senders {
          min-width: 20px;
          height: 20px;
          padding: 0 4px;
          font-size: 10px;
        }
      }

      .aggregated-text {
        font-size: 13px;
      }
    }

    .notification-text {
      font-size: 13px;
    }

    .notification-extra {
      padding: 10px;
      margin-top: 10px;

      .article-summary,
      .comment-content {
        .summary-label,
        .comment-label {
          font-size: 11px;
        }

        .summary-text,
        .comment-text {
          font-size: 12px;
        }
      }

      .reply-content {
        .reply-text {
          font-size: 12px;

          .label {
            font-size: 11px;
          }
        }
      }
    }
  }
}

.notification-content {
  // 点赞聚合通知样式
  .aggregated-like-notification {
    display: inline;
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;

    .aggregated-text {
      display: inline;
    }
  }

  .notification-text {
    display: inline;
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
  }

  // 新的评论详情卡片
  .comment-detail-card {
    padding: 8px 10px;
    margin-top: 6px;
    background: #f8fafc;
    border-left: 2px solid #3b82f6;
    border-radius: 4px;

    .comment-header {
      margin-bottom: 4px;
      font-size: 12px;

      .commenter-name {
        font-weight: 600;
        color: #3b82f6;
      }

      .reply-to {
        margin-left: 6px;
        color: #94a3b8;
      }
    }

    .comment-content-text {
      margin-bottom: 6px;
      font-size: 13px;
      line-height: 1.5;
      color: #475569;
      word-break: break-word;
    }

    .comment-meta {
      display: flex;
      gap: 12px;
      align-items: center;
      font-size: 11px;
      color: #94a3b8;

      .meta-item {
        display: flex;
        gap: 4px;
        align-items: center;
      }

      .meta-time {
        margin-left: auto;
      }
    }
  }

  // 原评论引用卡片
  .original-comment-card {
    padding: 8px 10px;
    margin-top: 6px;
    background: #f8fafc;
    border-left: 2px solid #cbd5e1;
    border-radius: 4px;

    .original-label {
      margin-bottom: 4px;
      font-size: 11px;
      font-weight: 500;
      color: #94a3b8;
    }

    .original-content {
      font-size: 12px;
      line-height: 1.4;
      color: #64748b;

      .original-author {
        font-weight: 600;
        color: #3b82f6;
      }
    }
  }

  // 文章信息卡片
  .article-info-card {
    display: flex;
    gap: 10px;
    padding: 8px 10px;
    margin-top: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    transition: all 0.2s ease;

    &:hover {
      background: #f1f5f9;
      box-shadow: 0 1px 4px rgb(0 0 0 / 5%);
    }

    .article-cover {
      flex-shrink: 0;
      width: 60px;
      height: 60px;
      object-fit: cover;
      border-radius: 4px;
    }

    .article-text {
      flex: 1;
      min-width: 0;

      .article-title {
        margin: 0 0 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
        color: #1e293b;
        white-space: nowrap;
      }

      .article-summary {
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        font-size: 12px;
        line-height: 1.4;
        color: #94a3b8;
        -webkit-box-orient: vertical;
      }
    }
  }

  // 被@提及的用户
  .mentioned-users {
    padding: 6px 10px;
    margin-top: 6px;
    background: #eff6ff;
    border-left: 2px solid #3b82f6;
    border-radius: 4px;

    .mentioned-label {
      margin-right: 6px;
      font-size: 11px;
      font-weight: 500;
      color: #64748b;
    }

    .mentioned-user {
      display: inline-block;
      padding: 2px 6px;
      margin-right: 6px;
      font-size: 11px;
      color: #3b82f6;
      background: #dbeafe;
      border-radius: 3px;
    }
  }

  .notification-extra {
    padding: 12px;
    margin-top: 12px;
    background: linear-gradient(135deg, #f5f7fa 0%, #f0f2f5 100%);
    border-left: 3px solid #409eff;
    border-radius: 6px;

    .article-summary,
    .comment-content {
      .summary-label,
      .comment-label {
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 500;
        color: #909399;
      }

      .summary-text,
      .comment-text {
        max-height: 80px;
        overflow-y: auto;
        font-size: 13px;
        line-height: 1.6;
        color: #606266;
        word-break: break-word;
        white-space: pre-wrap;
      }
    }

    .reply-content {
      .reply-text {
        font-size: 13px;
        line-height: 1.5;
        color: #606266;

        .original-comment,
        .reply-text-content {
          margin-bottom: 8px;

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            margin-right: 6px;
            font-size: 12px;
            font-weight: 500;
            color: #909399;
          }

          .text {
            color: #606266;
            word-break: break-word;
            white-space: pre-wrap;
          }
        }

        .original-comment {
          padding-bottom: 8px;
          border-bottom: 1px dashed #dcdfe6;
        }
      }
    }
  }
}
</style>
